<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    {include file="common_header"}
    <title>商品分类统计</title>
</head>
<body>
<div style="width: 600px; margin: 60px auto">
    <label>一级分类：</label>
     <span class="select-box inline" >
          <select class="select" id="selects" style="width: 200px">
            {volist name="classify" id="class"}
            <option value ="{$class['id']}" >{$class['classify_name']}</option>
            {/volist}
         </select>
    </span>
</div>
<div style=" width:1000px;margin:40px auto 0;height: 500px;" id="main"></div>
{include file='common_footer'}
<script type="text/javascript" src="__AJS__echarts.min.js" ></script>
<script type="text/javascript">
    var goodsclass ={$goodsclass};
    var num ={$num};
    var myCharta = echarts.init(document.getElementById('main'));
    var option = {
        title : {
            text: '二级分类{$name}商品统计'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['商品分类']
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: true},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data :''
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'商品分类',
                type:'bar',
                data:'',
                label:{
                    normal:{
                        show: true,
                        position: 'top'}
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                barWidth:80

            }
        ]
    };
 $("#selects").change(function(){
     var id = $("#selects option:selected").val();
     var htmlname = $("#selects option:selected").html();
     var url = "{:url('goodsclassify')}";
     $.ajax({
         url: url,
         data:{id:id},
         dataType:'json',
         type:'post',
         success: function (data) {
             option.xAxis[0]['data']= data.goodsclass;
             option.series[0]['data']=data.num;
             option.title['text']= "二级分类"+htmlname+"商品统计";
             myCharta.setOption(option);
         },
         error: function () {
             layer.msg('网络错误，请稍后重试',{icon:2});
         }
     });
 })
    //
    option.xAxis[0]['data']= goodsclass;
    option.series[0]['data']= num;

    // 为echarts对象加载数据
    myCharta.setOption(option);
    //绑定图表resize事件
    window.addEventListener("resize", function () {
        myCharta.resize();
    });

</script>
</body>
</html>